
html {
	background-color: #e8e8e8;
}

html, body {
	/*overflow: hidden;*/
	-webkit-user-select: none;
	text-align: center;
	font: 100%/1.5 'Helvetica', Helvetica, Arial, sans-serif;
}

#nb-shakes { position: absolute; }

.iphone {
	background-color: #e8e8e8;
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: 100%;
}

.phase { display: none; position: absolute; height: 100%; width: 100%; }

.loader {
	width:100%;
	height:40px;
	margin-top:50px;
	display:block;
	background:transparent url(../img/layout/loader.gif) 50% 50% no-repeat;
}


#counter {
 	font-size:700%;
	text-align:center!important;
	font-weight:bold;
	width:100%;
	display:block;
	color:#252001;
}
.separator {
	background-color: #fff;
	height: 100%;
	margin-left: 159px;
	position: absolute;
	width: 2px;
	z-index: 2;
}
.selection-made .separator { display: none; }

.liquid-wrapper {
	background-color: transparent;
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: 50%;
}
.liquid-wrapper.tea { }
.liquid-wrapper.coffee {
	left: 50%;
}
.selection-made .liquid-wrapper { left: 0; width: 100%; }

.liquid {
	background-color: grey;
	height: 100%;
	position: absolute; bottom: 100%; left: 0; right: 0;
		z-index:1;
	-webkit-transform-origin: 50% 10%;
	-webkit-transition: all 1s ease-in-out;
}
.liquid.tea { background-color: #dfe579; left: -200%; right: -300%; }
.liquid.coffee { background-color: #252001; left: -300%; right: -200%; }

.selection-made .liquid { left: -200%; right: -200%; }
.selection-made.selection-made-tea .liquid.coffee { display: none; }
.selection-made.selection-made-coffee .liquid.tea { display: none; }
.selection-made #phase3 .mast { display:none; } 
.selection-made #phase3 .mast.shake-it { display:block; }

#sugar-level, #sugar-level-aim {
	background-color: rgba(255,255,255,0.5);
	height: 0px;
	position: absolute; bottom: 0px;
	width: 100%;
	z-index: 3;
}
#sugar-level-aim { background-color: transparent; border-top: 1px dashed #fff; height: 99px; display: none; }
.selection-made #sugar-level-aim { display: block; }

/*
	GUI LAYOUT
	iphone res - 320 x 420
*/ 
body { 

	}
#wrapper, .phase, .wrapper
{
	position:relative;
	margin:0 auto;
	text-align: left;
	/*
		target iPhone 3 res for now...
	*/
	width:320px;
	height:480px;
	/*background:#ccc;*/
	/*border:1px solid #ccc;*/
	
}
/* Inner pad elements */

/*
	MAST HEADINGS
*/
.mast {
	border-top:2px black solid;
	background:transparent 50% 50% no-repeat;
	width:270px;
	height:130px;
 	/*border: 1px solid #ccc;*/
	text-indent: -9999px;
	display:block;
	padding:25px;
}



.start-game {
	background-image: url(../img/layout/headings/lockup_startingsoon.png);
}

.who-will-serve {
	/*background-image: url(../img/layout/headings/lockup1.svg);*/
	background-image: url(../img/layout/headings/lockup1.png);
}
.we-need-some-data { 
	/*background-image: url(../img/layout/headings/lockup2.svg);*/
	background-image: url(../img/layout/headings/lockup2.png);
}
.countdown {
	/*background-image: url(../img/layout/headings/lockup3.svg);*/
	background-image: url(../img/layout/headings/lockup3.png);
}

.results-waiting { 
	background-image: url(../img/layout/headings/lockup_waitingforresults.png);
	}

.shake-it {
	/*background-image: url(../img/layout/headings/lockup4.svg);*/
	background-image: url(../img/layout/headings/lockup4.png);
	display:none;
	position:absolute;
	top:0;
}
.want-tea, .want-coffee {
	width: 160px; 
	z-index:10;
	padding:0;
 	position:absolute;
	top:35%;
	border:none;
}
.want-tea { 
	background-image: url(../img/layout/headings/tap_tea.png);
}

.want-coffee { 
	background-image: url(../img/layout/headings/tap_coffee.png);
}

.add-sugar {
	/*background-image: url(../img/layout/headings/lockup4.svg);*/
	background-image: url(../img/layout/headings/lockup4.png);
}
#winner .mast {
	/*background-image: url(../img/layout/headings/lockup5.svg);*/
	background-image: url(../img/layout/headings/lockup5.png);
}
#loser .mast {
	/*background-image: url(../img/layout/headings/lockup6.svg);*/
	background-image: url(../img/layout/headings/lockup6.png);
}
#winner, #loser { display:none; }
#phase5.winner #winner, #phase5.loser #loser { display:block; } 

 
#loser ul, #loser ul li { margin:0; padding:0; list-style:none; list-style-position:inside; } 
#loser ul { margin:0 30px;}
#loser ul li {
	font-size:70%;
	text-transform:uppercase;
	overflow:auto;
	font-weight:bold;
	padding:0 0 5px;
	border-bottom:2px solid #252001;
} 
#loser ul li span { float:right; } 
#loser ul#winner-list li { font-weight:normal; border-bottom:1px solid #252001; padding-top:15px;}
#loser-name,
.profile-pic { text-align:center; display:block; }
#loser-name { text-transform:uppercase; margin:-20px 0 25px; letter-spacing:1.5px }

/*
	FORM ELEMENTS
*/
form { padding:30px;/* background:#ccc;*/ width:260px; }
form.register {
	position:absolute;
	left:0;
	bottom:0;
}
form.register .error { text-align:center; font-size:70%; color:#B50000; margin-bottom:10px;}
form.register p[class*=form] {
	background:#fff;
	margin-top:5px;
	font-size:100%;
	overflow:auto;
}
form.register p.form-office { /*margin-top:15px;*/ }
label { 
	overflow:auto;
	text-transform:uppercase;
	font-size:60%;
	font-weight:bold;
 	padding:5px 10px;
	}
input, select { text-transform:uppercase; }
input[type=text], select { 
	width:190px;
	background:#fff;
	border:none;
	padding:4px 0px  0  0;
	/*padding:5px;*/
	float:right;
	}
form.register p.form-submit { text-align:center;/*display:none;*/ background:transparent; margin-top:15px; }
input[type=submit] {
/*	 color:white; background:#252001; 
	height: 60px;
	 -moz-border-radius:30px;
	 -webkit-border-radius: 30px;
	 width: 60px;
	font-weight:bold;*/
	width: 65px;
	height:28px;
	border:none;
	background:transparent; 
	background-image: url(../img/layout/submit.png);
	} 
textarea:focus, input:focus{
    outline: none;
}